<template>
	<view>
		<!-- 头部分类 -->
		<view class="tagNav">
			<view class="tagNavText" :class="{tagClass:navCurrent === index}" v-for="(item,index) in classList"
				:key="index" @click="navclick(index)" :style="{minWidth: (item.title.length / 2) * 100 + 'rpx'}">
				{{item.title}}
			</view>
		</view>

		<!-- 列表 -->
		<view class="listBox">
			<video-card v-for="(item,index) in list" :key="index" :item="item" />
		</view>
		<u-loadmore :status="pageObj.status" :nomoreText="null" fontSize="28" iconSize="32" />
	</view>
</template>

<script>
	import {
		Api
	} from "../../../service/api";
	import listItemVue from '../../../components/listItem.vue';
	import VideoCard from "../../../components/videoCard.vue";
	export default {
		components: {
			VideoCard,
			listItemVue
		},
		data() {
			return {
				classList: [{
					id: null,
					title: '精选'
				}],
				navCurrent: 0, // 头部当前选中
				list: [], // 列表
				pageObj: {
					pageSize: 9,
					pageNum: 0,
					status: 'loading'
				},
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				this.gettab()
				this.getList()
			},
			async gettab() {
				const arr = uni.getStorageSync('classList')
				if (arr.length > 0) {
					this.classList = [...this.classList, ...arr]
					return
				}
				let res = await Api.classifyList()
				this.classList = [...this.classList, ...res.data]
			},
			navclick(index) {
				this.navCurrent = index
				this.list = []
				this.pageObj.pageNum = 0
				this.pageObj.status = 'loading'
				this.getList()
			},
			getList() {
				if (this.pageObj.status === 'nomore') return
				this.pageObj.status = 'loading'
				Api.getAppTvPageList({
					classifyId: this.classList[this.navCurrent].id,
					pageNo: ++this.pageObj.pageNum,
					pageSize: this.pageObj.pageSize,
				}).then(res => {
					console.log(res);
					this.list = this.list.concat(res.data.list)
					if (this.list.length < res.data.total) this.pageObj.status = 'loadmore'
					else this.pageObj.status = 'nomore'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tagNav {
		width: 100%; // 容器宽度设置为100%
		overflow-x: auto; // 隐藏溢出的部分
		display: flex;
		gap: 20rpx;

		.tagNavText {
			display: inline-block; // 使元素在一行显示
			//display: flex;
			//justify-content: center;
			//align-items: center;
			background-color: #F5F5F8;
			text-align: center;
			height: 54rpx;
			line-height: 54rpx;
			border-radius: 24rpx;
			color: #686767;
			font-weight: 500;
			font-size: 28rpx;
			//padding: 0 20rpx;
		}

		.tagClass {
			background-color: #FFF0F3;
			color: #E81F4B;
		}
	}

	.scrolllist::-webkit-scrollbar {
		display: none;
	}

	.listBox {
		width: 100%;
		padding-bottom: 130rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		gap: 23rpx;
	}
</style>